left right top bottom
Description
left right top bottom set offset values for positioned elements.
Their value can be length or % or auto.
Example
<html>
<head>
<style type='text/css'>
body {<!-- w ww .ja va 2 s .co m-->
background: yellowgreen;
}
p {
margin: 10px 110px;
}
div {
position: absolute;
background: yellow;
padding: 5px;
width: 100px;
height: 100px;
}
div#top-left {
top: 0;
left: 0;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
div#top-right {
top: 0;
right: 0;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
div#bottom-left {
bottom: 0;
left: 0;
border-right: 1px solid black;
border-top: 1px solid black;
}
div#bottom-right {
bottom: 0;
right: 0;
border-left: 1px solid black;
border-top: 1px solid black;
}
</style>
</head>
<body>
<div id='top-left'>Top, Left</div>
<div id='top-right'>Top, Right</div>
<div id='bottom-left'>Bottom, Left</div>
<div id='bottom-right'>Bottom, Right</div>
</body>
</html>